<template>
	<div class="swaper">
		<swiper :options="swiperOption" v-if="showSwiper">
	    <!-- slides -->
		    <swiper-slide v-for="item of this.swiperList" :key='item.id'>
		    	<img :src="item.imgUrl" width=100%>
		    </swiper-slide>

	    	<div class="swiper-pagination"  slot="pagination"></div>
  
  		</swiper>
  </div>
</template>
<script>
	export default{
		name:'HomeSwiper',
		props:{
			'swiperList':Array
		},
		data:function(){
				return {
					swiperOption:{
						pagination:'.swiper-pagination',
						loop:true,
						autoplay:5000
				// 		autoplay: {
    //                         delay: 5000,
    // 						stopOnLastSlide: false,
    // 						disableOnInteraction: true,
    // }
						}
				}
			},
		computed : {
			showSwiper (){
				return this.swiperList.length
			}
			
		}

		
	}
</script>
<style lang="stylus" scoped>
	.swaper >>> .swiper-pagination-bullet-active
		background-color:#fff
	.swaper
		overflow:hidden
		width:100%
		height:0
		padding-bottom:30.5%
		background:#eee
</style>